<template>
  <view class="">
    <view class="home-bg" :style="{
    backgroundImage:  scrollTop <=40 ? `url(https://ktv.appstor.cn/static/bg.png)` : '',
  }">
      <uv-navbar placeholder fixed
                 :bg-color=" scrollTop > 40 ? 'https://ktv.appstor.cn/static/bg.png'  :  'rgba(0,0,0,0)'  ">
        <template #left>
          <view class="flex-center">
            <image class="location" src="/static/home/location.png"></image>
            <view>海淀区中关村门店</view>
          </view>
        </template>
      </uv-navbar>

    </view>

    <scroll-view :style="{
    position: 'absolute',
    top: scrollTopStyle,
    height: `calc(100vh - ${scrollTopStyle})`
    }" scroll-y @scroll="onScroll" @scrolltolower="scrolltolower" :show-scrollbar="false" class="search">

      <view class="homeSearch">
        <uv-search bgColor="#fff" height="72rpx" placeholder="搜索" disabled="true" @click="searchPage"
                   :showAction="false" ></uv-search>
      </view>

      <view class="banana_box">
        <image class="banana"
               src="https://php-b2c-demo.likeshop.cn/uploads/images/background/20201225/5180c80ce6e2c6080c914bfd66375dba.png"></image>
      </view>


      <view class="content">
        <view class="flexs">
          <view class="flex-center">
            <view class="title">商品分类</view>
            <view class="tag">热门</view>
          </view>
          <view class="text">查看全部</view>
        </view>

        <view class="category">
          <view class="category-item" v-for="(item ,index) in categoryList">
            <view>
              <image :src="item.icon" class="icon"></image>
              <view style="margin-top: 10rpx">{{ item.name }}</view>
            </view>
          </view>
        </view>

        <view class="notice">
          <view class="notice_icon"></view>
          <view class="notice_title">公告公告公告公告公告公告公告公告</view>
        </view>


        <view style="margin-top: 40rpx" class="flexs">
          <view class="flex-center">
            <view class="title">商品</view>
            <view class="tag">热销</view>
          </view>
        </view>

        <view class="activity_box" style="margin-top: 30rpx">
          <view class="activity1">
            <image mode="widthFix" src="/static/home/hd1.png" class="activity-img"></image>
            <view style="position: absolute; top: 30rpx; left: 30rpx" class="title-common">当日热销</view>
            <view style="position: absolute; top: 90rpx; left: 30rpx" class="desc1">最近发布的动态视频</view>
          </view>
          <view class="activity2">
            <image mode="widthFix" src="/static/home/hd2.png" class="activity-img"></image>
            <view style="position: absolute; top: 30rpx; left: 30rpx" class="title-common">本月热销</view>
            <view style="position: absolute; top: 90rpx; left: 30rpx" class="desc2">随时查看蔬菜质量</view>
          </view>
        </view>


        <jp-falls class="falls" :routesList="columns">
          <template #left={left}>
            <view v-for="item in left">
              <view class="left item">
                <image mode="widthFix" :src="item.url"></image>
                <view class="label">{{ item.label }}</view>
                <view class="tag-box">
                  <view class="tag1">特价</view>
                  <view class="tag2">24H发货</view>
                </view>
                <view class="footer">
                  <view class="price">
                    <view style="font-size: 22rpx;color: #F55726;">￥</view>
                    <view style="font-size: 32rpx;color: #F55726;">{{ item.price }}</view>
                  </view>
                  <view>
                    <image style="width: 44rpx; height: 44rpx" src="/static/home/addCart.png"></image>
                  </view>
                </view>

              </view>
            </view>
          </template>
          <template #right={right}>
            <view v-for="item in right">
              <view class="right item">
                <image mode="widthFix" :src="item.url"></image>
                <view class="label">{{ item.label }}</view>
                <view class="tag-box">
                  <view class="tag1">特价</view>
                  <view class="tag2">24H发货</view>
                </view>
                <view class="footer">
                  <view class="price">
                    <view style="font-size: 22rpx;color: #F55726;">￥</view>
                    <view style="font-size: 32rpx;color: #F55726;">{{ item.price }}</view>
                  </view>
                  <view>
                    <image style="width: 44rpx; height: 44rpx" src="/static/home/addCart.png"></image>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </jp-falls>

      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import {ref, computed} from "vue"
import {onLoad} from "@dcloudio/uni-app"

const scrollTop = ref(0)
const navbarHeight = ref(0)
const statusBarHeight = ref(0)
const categoryList = [
  {
    name: "时令生鲜",
    icon: "/static/home/1.png"
  },
  {
    name: "饮食酒品",
    icon: "/static/home/2.png"
  },
  {
    name: "厨房用品",
    icon: "/static/home/3.png"
  },
  {
    name: "玩具乐器",
    icon: "/static/home/4.png"
  },
  {
    name: "美妆护肤",
    icon: "/static/home/5.png"
  }
]

const columns = ref([
  {
    label: '竹纤维浅灰男女职业装衬衫浼烫长短袖套装夏季工作服定制',
    price: '188.00',
    yprice: '188.00',
    shop: '@缪段旗舰店',
    url: 'https://img.alicdn.com/imgextra/i4/233440143/O1CN01fqgtkE1CvXNSF9B4H_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '精品名牌手表',
    price: '188.00',
    yprice: '188.00',
    shop: '@缪段旗舰店',
    url: 'https://img1.baidu.com/it/u=917013846,2857055468&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
    value: 1,
  },
  {
    label: '艷冰丝阔腿裤女夏季薄款高2023夏季新款休闲裤女速干透',
    price: '188.00',
    yprice: '188.00',
    shop: '@潮衫定制大码女装',
    url: 'https://img.alicdn.com/imgextra/i4/55657456/O1CN01RWpfMv24wttQyW4Vq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '泡面批发，都吃泡面了，你还在乎健康？',
    price: '49.00',
    yprice: '69.00',
    shop: '@日GPGW服饰旗舰店',
    url: 'https://img2.baidu.com/it/u=3791970328,99712995&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1686243600&t=93330bed1736b70e078d99586cf96787',
    value: 1,
  }, {
    label: '竹纤维浅灰男女职业装衬衫浼烫长短袖套装夏季工作服定制',
    price: '49.00',
    yprice: '69.00',
    shop: '@日GPGW服饰旗舰店',
    url: 'https://img.alicdn.com/imgextrahttps://img.alicdn.com/imgextra/i3/2215502014115/O1CN01i3HAqq1gGieIajBIV_!!2215502014115-0-alimamacc.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '腰大码胖mm宽松显瘦梨形身气薄款运动长裤情侣宽松束脚..',
    price: '88.00',
    yprice: '399.00',
    shop: '@thea旗舰店',
    url: 'https://img.alicdn.com/imgextra/i3/166530185/O1CN01oH2frt1DEm7L9WPUq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '装裤子夏季薄款春秋垂感九分裤夏季新款裤子高腰直简女裤..',
    price: '239.00',
    yprice: '239.00',
    shop: '@日雅思诚女裤',
    url: 'https://img.alicdn.com/imgextra/i3/13565098/O1CN01SCGuLK1nWvzOFlQIm_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '竹纤维浅灰男女职业装衬衫浼烫长短袖套装夏季工作服定制',
    price: '188.00',
    yprice: '188.00',
    shop: '@缪段旗舰店',
    url: 'https://img.alicdn.com/imgextra/i1/25258758/O1CN01Rj230g2EZDZKuIZdf_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '竹纤维浅灰男女职业装衬衫浼烫长短袖套装夏季工作服定制',
    price: '188.00',
    yprice: '188.00',
    shop: '@缪段旗舰店',
    url: 'https://img.alicdn.com/imgextra/i4/233440143/O1CN01fqgtkE1CvXNSF9B4H_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '艷冰丝阔腿裤女夏季薄款高2023夏季新款休闲裤女速干透',
    price: '188.00',
    yprice: '188.00',
    shop: '@潮衫定制大码女装',
    url: 'https://img.alicdn.com/imgextra/i4/55657456/O1CN01RWpfMv24wttQyW4Vq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '竹纤维浅灰男女职业装衬衫浼烫长短袖套装夏季工作服定制',
    price: '49.00',
    yprice: '69.00',
    shop: '@日GPGW服饰旗舰店',
    url: 'https://img.alicdn.com/imgextrahttps://img.alicdn.com/imgextra/i3/2215502014115/O1CN01i3HAqq1gGieIajBIV_!!2215502014115-0-alimamacc.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '腰大码胖mm宽松显瘦梨形身气薄款运动长裤情侣宽松束脚..',
    price: '88.00',
    yprice: '399.00',
    shop: '@thea旗舰店',
    url: 'https://img.alicdn.com/imgextra/i3/166530185/O1CN01oH2frt1DEm7L9WPUq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '装裤子夏季薄款春秋垂感九分裤夏季新款裤子高腰直简女裤..',
    price: '239.00',
    yprice: '239.00',
    shop: '@日雅思诚女裤',
    url: 'https://img.alicdn.com/imgextra/i3/13565098/O1CN01SCGuLK1nWvzOFlQIm_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
  {
    label: '竹纤维浅灰男女职业装衬衫浼烫长短袖套装夏季工作服定制',
    price: '188.00',
    yprice: '188.00',
    shop: '@缪段旗舰店',
    url: 'https://img.alicdn.com/imgextra/i1/25258758/O1CN01Rj230g2EZDZKuIZdf_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
])

const scrollTopStyle = computed(() => {
  return `${navbarHeight.value + statusBarHeight.value}px`;
});

onLoad(async () => {
  try {
    const systemInfo = await uni.getSystemInfo();
    navbarHeight.value = systemInfo.safeArea.top;
    statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

  } catch (error) {
    console.error('获取系统信息失败:', error);
  }
})

const onScroll = (event) => {
  scrollTop.value = event.detail.scrollTop
}

const scrolltolower = () => {
  const arr = [{
    label: '竹纤维浅灰男女职业装衬衫浼烫长短袖套装夏季工作服定制',
    price: '49.00',
    yprice: '69.00',
    shop: '@日GPGW服饰旗舰店',
    url: 'https://img.alicdn.com/imgextrahttps://img.alicdn.com/imgextra/i3/2215502014115/O1CN01i3HAqq1gGieIajBIV_!!2215502014115-0-alimamacc.jpg_468x468q75.jpg_.webp',
    value: 1,
  },
    {
      label: '腰大码胖mm宽松显瘦梨形身气薄款运动长裤情侣宽松束脚..',
      price: '88.00',
      yprice: '399.00',
      shop: '@thea旗舰店',
      url: 'https://img.alicdn.com/imgextra/i3/166530185/O1CN01oH2frt1DEm7L9WPUq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
      value: 1,
    },]
  columns.value = columns.value.concat(arr)
}

</script>


<style lang="scss" scoped>

.home-bg {
  width: 100%;
  height: 700rpx;
  background-size: 100% 100%;

  .location {
    width: 48rpx;
    height: 48rpx;
  }


}

.content {
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  margin-top: 40rpx;

  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #333333;
    margin-top: 10rpx;
    // 多行文本省略
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;

  }

  .tag {
    width: 68rpx;
    height: 40rpx;
    background: #FF8B00;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    font-weight: bold;
    font-size: 24rpx;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 16rpx;
  }

  .text {
    font-weight: 500;
    font-size: 24rpx;
    color: #40AE36;
  }
}

.flex-center {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 30rpx;
  color: #FFFFFF;
}

.flexs {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon {
  width: 108rpx;
  height: 108rpx;
}

.category {
  display: flex;
  margin-top: 30rpx;

  .category-item {
    flex: 1;
    text-align: center;
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
  }
}

.notice {
  width: 690rpx;
  height: 80rpx;
  background: linear-gradient(134deg, #E3FFF2 0%, #E0FFE8 100%);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  margin-top: 40rpx;
  padding: 20rpx 32rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  &_icon {
    width: 40rpx;
    height: 40rpx;
    background: #01C924;
    border-radius: 10rpx;
  }

  &_title {
    font-weight: 500;
    font-size: 28rpx;
    color: #00914E;
    margin-left: 24rpx;
  }
}

.activity_box {

  display: flex;
  align-items: center;
  //justify-content: space-between;

  .activity1 {
    position: relative;

    .desc1 {
      font-weight: 500;
      font-size: 20rpx;
      color: #F3253A;
      margin-top: 16rpx;
    }
  }

  .activity2 {
    position: relative;
    margin-left: 30rpx;

    .desc2 {
      font-weight: 500;
      font-size: 20rpx;
      color: #00AE1C;
      margin-top: 16rpx;
    }
  }
}

.activity-img {
  width: 330rpx;
  //height: 200rpx;
}

.title-common {
  font-weight: bold;
  font-size: 32rpx;
  color: #020001;
}


.search {


  .homeSearch {
    width: 690rpx;
    margin: auto;
    margin-top: 30rpx;
  }

  .banana_box {

    width: 690rpx;
    margin: auto;
    margin-top: 38rpx;

    .banana {
      width: 690rpx;
      height: 300rpx;
      box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
      border-radius: 0rpx 0rpx 0rpx 0rpx;

    }
  }
}

.tag-box {

  display: flex;
  margin-top: 10rpx;


  .tag1 {
    width: 44rpx;
    height: 26rpx;
    line-height: 26rpx;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    border: 1rpx solid #F55726;
    font-weight: 500;
    font-size: 18rpx;
    color: #F55726;
    text-align: center;

  }

  .tag2 {
    width: 80rpx;
    height: 26rpx;
    line-height: 26rpx;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    border: 1rpx solid #40AE36;
    font-weight: 500;
    font-size: 18rpx;
    color: #40AE36;
    margin-left: 12rpx;
    text-align: center;
  }
}


.price {
  display: flex;
  align-items: baseline;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.falls {
  padding: 0 20rpx;

  .left {
    margin-right: 10rpx;
  }

  .right {
    margin-left: 10rpx;
  }

  .item {
    background-color: #fff;
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(51, 51, 51, 0.06);
    overflow: hidden;
    width: 330rpx;
    padding: 0 30rpx 30rpx 30rpx;
    box-sizing: border-box;

    .label {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
      -webkit-line-clamp: 2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
      color: #666;
      padding: 0 12rpx;
    }

    image {
      width: 100%;
    }

    img {
      width: 100%;
    }
  }
}

</style>
